<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" content="unclexiao">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>遥控器</title>
</head>

<style>
    button {
        width: 90px;
        height: 40px;
        border-radius: 5px;
        font-size: 26px;
    }

    button+button {
        margin: 0 10px;
    }

    .center {
        text-align: center;
        margin: 15px auto;
    }
</style>
<div class="center">
    <button>Up</button>
</div>
<div class="center">
    <button>Left</button>
    <button>Space</button>
    <button>Right</button>
</div>

<div class="center">
    <button>Down</button>
</div>

<body>
    <script src="socket.io.js"></script>
    <script>
        var socket = io('http://www.unclexiao.com', {
            path: '/conf/socket.io'
        });

        var btns = document.getElementsByTagName('button');

        function handler(e) {
            var order = e.currentTarget.innerText;
            socket.emit('control', order);
        }

        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', handler);
        }
    </script>
</body>

</html>